<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex</title>
	</head>
	<style>
		.wrapper{
			width: 1000px;
			height: 900px;
			border: 1px solid #444;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
			flex-direction: column;
			/*align-items: stretch; 默认值。元素被拉伸以适应容器。纵向属性*/
			/*flex-direction: row-reverse;设置 <div> 元素内弹性盒元素的方向为相反的顺序： 横向属性*/
			/*flex-wrap: row nowrap;*/
			/*justify-content: center;*	项目位于容器的中心。/
			justify-content: space-evenly;
			/*justify-content: space-between*项目位于各行之间留有空白的容器内。/
			/*justify-content: space-evenly到边框的距离离下一个元素的像个距离相等*/
			/*justify-content: space-around到边框的距离离下一个元素的像个距离的二分之一*/
		}
		.item1 {
			width: 200px;
			height: 200px;
			background: red;
			
		}
		.item2{
			width: 200px;
			height: 200px;
			background: aquamarine;
		}
		.item3{
			width: 200px;
			height: 200px;
			background: cornflowerblue;
		}
		.item4{
			width: 50px;
			height: 50px;
			background:cornflowerblue;
		}
		.item5{
			width: 50px;
			height: 50px;
			background:cornflowerblue;
		}
		.item6{
			width: 50px;
			height: 50px;
			background:cornflowerblue;
		}
		.item7{
			width: 50px;
			height: 50px;
			background:cornflowerblue;
		}
		.wrapper1{
			width: 1600px;
			height: 500px;
			border: 1px solid #444;
			display: flex;
			justify-content: space-around;
		}
	</style>
	<body>
		<div class="wrapper">
			<div class="item1">麻雀</div>
			<div class="item2">雀食</div>
			<div class="item3"></div>
		</div>
		<div class="wrapper1">
			<div class="item4">4</div>
			<div class="item5">5</div>
			<div class="item6">6</div>
			<div class="item7">7</div>
			</div>
			
		
	</body>
</html>
